<template>
  <div class="viewshop" v-wechat-title="title" :class="{gun:is_industry||is_region||is_area}">
    <!-- <company-screen></company-screen> -->
    <div class="screen">
      <div class="store_category" @click="is_industryB(1)" :class="{action:industry!='行业'||is_industry}">{{industry}}
        <span class="iconfont icon-arrow-down" :class="{xia:is_industry}"></span>
      </div>
      <div class="district" @click="is_regionB(1)" :class="{action:cityZ!='区域'||is_industry}">{{cityZ}}
        <span class="iconfont icon-arrow-down" :class="{xia:is_city}"></span>
      </div>
      <div class="store_area" @click="is_areaB(1)" :class="{action:areaZ!='面积'||is_industry}">{{areaZ}}
        <span class="iconfont icon-arrow-down" :class="{xia:is_area}"></span>
      </div>
    </div>
    <company-industry v-show="is_industry" @is_industryB="is_industryB" @industryC="industryC" :store_category="store_category" :categoryclass="categoryclass"></company-industry>
    <company-region v-show="is_region" @is_regionB="is_regionB" @regionC="regionC" :city="city" :district="district"></company-region>
    <company-area v-show="is_area" @is_areaB="is_areaB"></company-area>
    <company-list :list="list" :class="{gun:is_industry||is_region||is_area}"></company-list>
    <common-loading v-if="loading" class="lodaing"></common-loading>
    <van-empty v-show="Null"
      class="custom-image"
      description="当前暂无数据"
      :image="nullImg"
    />
    <common-download :class="{bottom:bottom}"></common-download>
    <common-nav :num="num"></common-nav>
    <div class="heidi" v-if="is_industry||is_region||is_area"></div>
  </div>
</template>
<script>
import CompanyIndustry from './components/CompanyIndustry'
import CompanyRegion from './components/CompanyRegion'
import CompanyArea from './components/CompanyArea'
import CompanyList from './components/CompanyList'
import CommonLoading from 'common/Loading'
import CommonDownload from 'common/Download'
import CommonNav from 'common/Nav'
export default {
  name: 'viewshop',
  components: {
    CompanyIndustry,
    CompanyRegion,
    CompanyArea,
    CompanyList,
    CommonLoading,
    CommonDownload,
    CommonNav
  },
  data () {
    return {
      num: 1,
      title: '查看商铺',
      search: '',
      industry: '行业',
      is_industry: false,
      store_category: '',
      categoryclass: '',
      cityZ: '区域',
      city: '',
      district: '',
      is_region: false,
      areaZ: '面积',
      store_area: '',
      is_area: false,
      page: 1,
      pagesize: 50,
      store_province: sessionStorage.getItem('Dcity'),
      list: [],
      Null: false,
      nullImg: require('../../assets/img/null.png'),
      loading: true,
      bottom: false,
      is_city: false
    }
  },
  mounted () {
    this.postList()
  },
  beforeMount () {
    // this.store_province = sessionStorage.getItem('store_province')
  },
  methods: {
    is_industryB (i) {
      this.is_industry = !this.is_industry
      this.is_region = false
      this.is_area = false
      if (i !== 1) {
        this.industry = i
      }
    },
    is_regionB (i) {
      if (i !== 1) {
        this.cityZ = i
      }
      this.is_industry = false
      this.is_region = !this.is_region
      this.is_area = false
    },
    is_areaB (i) {
      if (i !== 1) {
        this.areaZ = i
        this.store_area = i
      }
      this.is_industry = false
      this.is_region = false
      this.is_area = !this.is_area
      this.postList()
    },
    industryC (i) {
      this.store_category = i[0]
      this.categoryclass = i[1]
      this.postList()
    },
    regionC (i) {
      this.city = i[0]
      this.district = i[1]
      this.postList()
    },
    postList () {
      this.loading = true
      this.$axios.post(process.env.API_HOST + '/api/store/store', {
        store_province: this.store_province,
        page: this.page,
        limit: this.pagesize,
        store_category: this.store_category,
        categoryclass: this.categoryclass,
        city: this.city,
        district: this.district,
        store_area: this.store_area
      }).then(this.postListSucc)
        .catch(error => console.log(error))
    },
    postListSucc (res) {
      if (res.data.code === 1) {
        this.loading = false
        this.list = res.data.data.lists
        if (res.data.data.count < 5) {
          this.bottom = true
        } else {
          this.bottom = false
        }
        if (res.data.data.count < 1) {
          this.Null = true
        } else {
          this.Null = false
        }
      }
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.viewshop
  padding-bottom 1rem
  width 100%
  min-height 100%
  position relative
  .van-search
    height .88rem /* 44/50 */
    padding-bottom 0px
    /deep/ .van-search__content
      border-radius .1rem /* 5/50 */
  .screen
    width 100%
    height 1.1rem /* 55/50 */
    line-height 1.1rem /* 55/50 */
    display flex
    div
      flex 30;
      text-align center
    .action
      color #F6360A
    .xia
      transform:rotate(180deg);
      display inline-block
  .heidi
    width 100%
    height 100%
    position fixed
    background-color rgba(0,0,0,0.4)
    top 2rem
    z-index 9
  .van-empty
    padding 1.2rem /* 60/50 */ 0
    /deep/ .van-empty__image
      width 5.64rem /* 282/50 */
      height 4.72rem /* 236/50 */
      img
        width 100%
        height auto
    /deep/ .van-empty__description
      margin-top -.76rem /* 38/50 */
      padding 0px
      padding-left .26rem /* 13/50 */
      font-size .3rem /* 15/50 */
      color #656565
  .bottom
    position absolute
    bottom 1.2rem
  .lodaing
    position absolute
    top 1.98rem
    left 0
    height calc(100% - 1.98rem)
    z-index 5
.gun
  overflow hidden
  height 100%
</style>
